<template >
  <div class="login-records" id="LoginDate">
    <!-- 过滤栏 -->
    <div class="filter-bar">
      <el-input placeholder="请输入登录地址" v-model="searchAddress" style="width: 200px; margin-right: 10px;"></el-input>
      <el-input placeholder="请输入用户名" v-model="searchUsername" style="width: 200px; margin-right: 10px;"></el-input>
      <el-date-picker
        v-model="searchDate"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 300px; margin-right: 10px;"
      ></el-date-picker>
      <el-button type="primary" @click="search">搜索</el-button>
      <el-button @click="reset">重置</el-button>
    </div>
    
    <!-- 操作按钮 -->
    <div class="action-buttons">
      <el-button type="danger" @click="deleteRecords">删除</el-button>
      <el-button type="warning" @click="emptyRecords">清空</el-button>
      <el-button type="success" @click="exportRecords">导出</el-button>
    </div>
    
    <!-- 登录记录列表表格 -->
    <el-table :data="records" style="width: 100%;">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="访问编号" width="200"></el-table-column>
      <el-table-column prop="username" label="用户名" width="200"></el-table-column>
      <el-table-column prop="host" label="主机" width="250"></el-table-column>
      <el-table-column prop="location" label="登录地点" width="200"></el-table-column>
      <el-table-column prop="browser" label="浏览器" width="200"></el-table-column>
      <el-table-column prop="date" label="登录日期" width="280"></el-table-column>
    </el-table>
    
    <!-- 分页控制 -->
    <div class="pagination">
      <el-pagination
        @current-change="handlePageChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalRecords">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
    name:"LoginDate",
  data() {
    return {
      searchAddress: '',
      searchUsername: '',
      searchDate: [],
      records: [
        // 示例数据
        { id: 6437, username: 'admin', host: '192.168.56.1', location: '内网IP', browser: 'Chrome 12', date: '2024-01-03 18:06:36' },
        { id: 6441, username: 'admin', host: '192.168.38.1', location: '内网IP', browser: 'Chrome 12', date: '2024-01-04 08:20:09' },
        // 更多记录...
      ],
      currentPage: 1,
      pageSize: 10,
      totalRecords: 287
    };
  },
  methods: {
    search() {
      // 搜索逻辑
      console.log('搜索条件:', this.searchAddress, this.searchUsername, this.searchDate);
    },
    reset() {
      this.searchAddress = '';
      this.searchUsername = '';
      this.searchDate = [];
      // 重置搜索条件后重新搜索
      this.search();
    },
    deleteRecords() {
      // 删除选中记录
      console.log('删除选中记录');
    },
    emptyRecords() {
      // 清空所有记录
      console.log('清空所有记录');
    },
    exportRecords() {
      // 导出记录
      console.log('导出记录');
    },
    handlePageChange(page) {
      this.currentPage = page;
      // 加载新页的数据
      console.log('切换到第', page, '页');
    }
  }
};
</script>

<style scoped>
.login-records {
  padding: 20px;
}
.filter-bar {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.action-buttons {
  margin-bottom: 20px;
}
.pagination {
  margin-top: 20px;
  text-align: center;
}
</style>